<link rel="stylesheet" href="assets/user/plugins/umeditor/themes/default/css/umeditor.css">
<link rel="stylesheet" href="assets/user/css/diy.css">
<link rel="stylesheet" href="assets/user/css/ystep.css">
<link rel="stylesheet" href="assets/user/css/member.css">
<div class="row-content layer-cf">
    <div class="widget layer-cf ">
		<div class="widget-head layer-cf">
			<div class="widget-title layer-cf">编辑页面设计</div>
		</div>
        <div class="widget-body">
            <!-- diy 工作区 -->
            <div class="work-diy dis-flex flex-x-between">
                <!-- 工具栏 -->
                <div id="diy-menu" class="diy-menu">
                    <div class="menu-title"><span>组件库</span></div>
                    <div class="navs">
                        <div class="navs-group">
                            <div class="title">媒体组件</div>
                            <div class="navs-components layer-cf">
                                <nav class="special" data-type="banner">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-image-multiple"></i></p>
                                    <p>图片轮播</p>
                                </nav>
                                <nav class="special" data-type="imageSingle">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-image"></i></p>
                                    <p>单图组</p>
                                </nav>
                                <nav class="special" data-type="window">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-newspaper"></i></p>
                                    <p>图片橱窗</p>
                                </nav>
                                <nav class="special" data-type="video">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-video"></i></p>
                                    <p>视频组</p>
                                </nav>
                            </div>
                            <div class="title">商城组件</div>
                            <div class="navs-components layer-cf">
                                <nav class="special" data-type="search">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-search-web"></i></p>
                                    <p>搜索框</p>
                                </nav>
                                <nav class="special" data-type="notice">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-volume-high"></i></p>
                                    <p>公告组</p>
                                </nav>
                                <nav class="special" data-type="navBar">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-apps"></i></p>
                                    <p>导航组</p>
                                </nav>
                                <nav class="special" data-type="goods">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-shopping"></i></p>
                                    <p>商品组</p>
                                </nav>
								<nav class="special" data-type="coupon">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-ticket-percent"></i></p>
                                    <p>优惠券组</p>
                                </nav>
                              
                            </div>
							 <div class="title">营销</div>
                            <div class="navs-components layer-cf">
                                <nav class="special" data-type="assemble">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-clipboard-account"></i></p>
                                    <p>拼团</p>
                                </nav>
                                <nav class="special" data-type="spike">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-av-timer"></i></p>
                                    <p>秒杀</p>
                                </nav>
                                <nav class="special" data-type="robbuy">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-weight-kilogram"></i></p>
                                    <p>抢购</p>
                                </nav>
								 <nav class="special" data-type="promgoods">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-tag-multiple"></i></p>
                                    <p>商品促销</p>
                                </nav>
									<nav class="special" data-type="signin">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-map-marker-radius"></i></p>
                                    <p>签到</p>
                                </nav>
							
                            </div>
                            <div class="title">工具组件</div>
                            <div class="navs-components layer-cf">
                                <nav class="special" data-type="blank">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-selection"></i></p>
                                    <p>辅助空白</p>
                                </nav>
                                <nav class="special" data-type="guide">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-minus"></i></p>
                                    <p>辅助线</p>
                                </nav>
                                <nav class="special" data-type="richText">
                                    <p class="item-icon"><i class="mdi menu-icon mdi-size mdi-clipboard-text"></i></p>
                                    <p>富文本</p>
                                </nav>
                            </div>
							
                        </div>
                    </div>
                    <input type="hidden" name="app_page['page_id']" value="{$model['page_id']??''}">
                    <div class="action">
                        <button id="submit" type="button" class="layer-btn layer-btn-xs layer-btn-secondary">
                            保存页面
                        </button>
                    </div>
                </div>
                <!--手机diy容器-->
                <div class="diy-phone">
                    <!-- 手机顶部标题 -->
                    <div id="diy-page" class="phone-top optional __no-move" data-type="page"></div>
                    <!-- 小程序内容区域 -->
                    <div id="phone-main" class="phone-main layer-scrollable-vertical"></div>
                </div>
                <!-- 编辑器容器 -->
                <div id="diy-editor" class="diy-editor form-horizontal">
                    <div class="inner"></div>
                </div>
            </div>
            <!-- 提示 -->
            <div class="tips layer-margin-top-lg layer-margin-bottom-sm">
                <div class="pre">
                    <p>1. 设计完成后点击"保存页面"，在小程序端页面下拉刷新即可看到效果。</p>
                    <p>2. 如需填写链接地址请参考<a href="{:url('tpl/links')}" target="_blank">页面链接</a></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 文件库弹窗 -->
{include file="layouts/_template/file_library" /}

<!--diy元素-->
{include file="app/page/tpl/diy" /}

<!--编辑器: 搜索栏-->
{include file="app/page/tpl/editor"/}

<script src="assets/user/js/select.data.js"></script>
<script src="assets/user/js/ddsort.js"></script>
<script src="assets/user/plugins/umeditor/umeditor.config.js"></script>
<script src="assets/user/plugins/umeditor/umeditor.min.js"></script>
<script src="assets/user/js/diy.js"></script>
<script>
    $(function () {

        // 渲染diy页面
        new diyPhone("{$jsonData}");

    });
</script>
